<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div {
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    起点<input type="text">
    终点<input type="text">
    <button onclick="fn()">开始查询</button>
    <div id="div"></div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "f2125609aed64fcc401bf15f4201ea52",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">

        // 展示地图，地图中心点为西藏拉萨布达拉宫，并做出一个标记
        AMapLoader.load({
            key: "cd3f839e39c286a21958106fadd714fb", //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15

        })
            .then((AMap) => {
                const map = new AMap.Map("div", {
                    // viewMode: '2D', //默认使用 2D 模式
                    // zoom: 11, //地图级别
                    center: [91.118463, 29.654471], //地图中心点
                });
                const marker = new AMap.Marker({
                    position: [91.118463, 29.654471], //位置
                });
                map.add(marker); //添加到地图
            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });

        const points = [
            { keyword: $("input:eq(0)").val() }, //起始点坐标
            { keyword: $("input:eq(1)").val() } //终点坐标
        ]
        function fn() {
            //引入和创建驾车规划插件
            AMap.plugin(["AMap.Driving"], function () {
                const driving = new AMap.Driving({
                    map: map,
                    panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
                });
                //获取起终点规划线路
                driving.search(points, function (status, result) {
                    if (status === "complete") {
                        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                        //查询成功时，result 即为对应的驾车导航信息
                        console.log(result);
                    } else {
                        console.log("获取驾车数据失败：" + result);
                    }
                });
            });
        }
    </script>
</body>

</html>